<template>
  <Layout class="p-5 bg-white">
    <Form>
      <h1 style="text-align: center;margin: 20px;">出租房发布</h1>
      <div class="content">
        <div class="width1190">
          <form
            action="#"
            style="margin-left: 200px;"
            method="get"
            class="pro-search"
          >
            <table>
              <tbody>
                <tr>
                  <th>省份：</th>
                  <td>
                    <a href="javascript:;"
                      ><input
                        @click="searchCity()"
                        type="radio"
                        name="provienceId"
                        id="provienceId_0"
                        value="0"
                        checked="checked"
                        v-model="house.provienceId"
                      />
                      <label for="provienceId_0">不限</label>
                    </a>
                    <a href="javascript:;" v-for="p in proviences"
                      ><input
                        @click="searchCity(p.srId)"
                        type="radio"
                        name="provienceId"
                        :id="'provienceId_' + p.srId"
                        :value="p.srId"
                        v-model="house.provienceId"
                      />
                      <label :for="'provienceId_' + p.srId">{{
                        p.name
                      }}</label></a
                    >
                  </td>
                </tr>
                <tr>
                  <th>城市：</th>
                  <td>
                    <a href="javascript:;">
                      <input
                        @click="searchRegin()"
                        type="radio"
                        name="cityId"
                        id="cityId_0"
                        value="0"
                        checked="checked"
                        v-model="house.cityId"
                      />
                      <label for="cityId_0">不限</label>
                    </a>
                    <a href="javascript:;" v-for="c in citys">
                      <input
                        @click="searchRegin(c.srId)"
                        type="radio"
                        name="cityId"
                        :id="'cityId_' + c.srId"
                        :value="c.srId"
                        v-model="house.cityId"
                      />
                      <label :for="'cityId_' + c.srId">{{ c.name }}</label>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>区域：</th>
                  <td>
                    <a href="javascript:;">
                      <input
                        @click="searchRChange(0)"
                        type="radio"
                        name="reignId"
                        id="reignId_0"
                        value="0"
                        checked="checked"
                        v-model="house.reignId"
                      />
                      <label for="reignId_0">不限</label>
                    </a>
                    <a href="javascript:;" v-for="r in regins">
                      <input
                        @click="searchRChange(r.srId)"
                        type="radio"
                        name="reignId"
                        :id="'reignIdId_' + r.srId"
                        :value="r.srId"
                        v-model="house.reignId"
                      />
                      <label :for="'reignIdId_' + r.srId">{{ r.name }}</label>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>商圈：</th>
                  <td>
                    <Input
                      v-model="house.pianqu"
                      style="width:150px"
                      placeholder="请输入商圈"
                    ></Input>
                  </td>
                </tr>
                <tr>
                  <th>小区：</th>
                  <td>
                    <Input
                      v-model="house.xiaoqu"
                      style="width:150px"
                      placeholder="请输入小区/散盘"
                    ></Input>(非必填)
                  </td>
                </tr>
                <tr>
                  <th>户型：</th>
                  <td>
                    <a href="javascript:;" v-for="item in roomCounts">
                      <input
                        @click="ss(item)"
                        type="radio"
                        name="roomCount"
                        :id="'roomCount_' + item.value"
                        :value="item.value"
                        :key="item.value"
                        v-model="house.roomCount"
                      />
                      <label :for="'roomCount_' + item.value">{{
                        item.label
                      }}</label>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>楼层：</th>
                  <td>
                    <a href="javascript:;" v-for="item in floors">
                      <input
                        @click="ss(item)"
                        type="radio"
                        name="floor"
                        :id="'floor_' + item.value"
                        :value="item.value"
                        :key="item.value"
                        v-model="house.louceng"
                      />
                      <label :for="'floor_' + item.value">{{
                        item.label
                      }}</label>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>朝向：</th>
                  <td>
                    <a href="javascript:;" v-for="item in faces">
                      <input
                        @click="ss(item)"
                        type="radio"
                        name="face"
                        :id="'face_' + item.value"
                        :value="item.value"
                        :key="item.value"
                        v-model="house.chaoxiang"
                      />
                      <label :for="'face_' + item.value">{{
                        item.label
                      }}</label>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>装修：</th>
                  <td>
                    <a href="javascript:;" v-for="item in repairs">
                      <input
                        @click="ss(item)"
                        type="radio"
                        name="repair"
                        :id="'repair_' + item.value"
                        :value="item.value"
                        :key="item.value"
                        v-model="house.zhuangxiu"
                      />
                      <label :for="'repair_' + item.value">{{
                        item.label
                      }}</label>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>电梯：</th>
                  <td>
                    <a href="javascript:;" v-for="item in lifts">
                      <input
                        @click="ss(item)"
                        type="radio"
                        name="lift"
                        :id="'lift_' + item.value"
                        :value="item.value"
                        :key="item.value"
                        v-model="house.dianti"
                      />
                      <label :for="'lift_' + item.value">{{
                        item.label
                      }}</label>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>价格：</th>
                  <td>
                    <a href="javascript:;">
                      <Input
                        v-model="house.leasePrice"
                        style="width:300px"
                        placeholder="请输入总价"
                      >
                        <span slot="append">元</span>
                      </Input>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>面积：</th>
                  <td>
                    <a href="javascript:;">
                      <Input
                        v-model="house.area"
                        style="width:300px"
                        placeholder="请输入总价"
                      >
                        <span slot="append">m²</span>
                      </Input>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>建筑年代：</th>
                  <td>
                    <a href="javascript:;">
                      <Input
                        v-model="house.niandai"
                        style="width:300px"
                        placeholder="请输入总价"
                      >
                        <span slot="append">年</span>
                      </Input>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>电话号码：</th>
                  <td>
                    <a href="javascript:;">
                      <Input
                        v-model="house.tel"
                        style="width:300px"
                        placeholder="请输入电话号"
                      >
                      </Input>
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>微信号：</th>
                  <td>
                    <a href="javascript:;">
                      <Input
                        v-model="house.wxNumber"
                        style="width:300px"
                        placeholder="请输入微信号"
                      >
                      </Input>(非必填)
                    </a>
                  </td>
                </tr>
                <tr>
                  <th>标题图片:</th>
                  <td>
                    <div v-if="house.imgUrl != ''">
                      <img
                        :src="house.imgUrl"
                        style="width:180px;height:120px"
                      />
                      <div class="demo-upload-list-cover">
                        <Icon
                          type="ios-trash-outline"
                          @click.native="handleRemove"
                        ></Icon>
                      </div>
                    </div>
                    <Upload
                      with-credentials
                      :max-size="2048"
                      :show-upload-list="false"
                      name="file"
                      ref="upload"
                      :format="['jpg', 'jpeg', 'png']"
                      :data="{ module: 'house', date: new Date() }"
                      :on-format-error="handleFormatError"
                      :on-exceeded-size="handleMaxSize"
                      :on-success="handleSuccess"
                      :action="url"
                    >
                      <Button
                        icon="ios-cloud-upload-outline"
                        style="margin-top: 5px"
                        >上传</Button
                      >
                    </Upload>上传其他图图片请提交后至个人中心的出租房修改页面上传
                  </td>
                </tr>
                <tr>
                  <th></th>
                  <td>
                    <Button
                      @click="submit"
                      v-if="sub"
                      type="primary"
                      style="margin-right: 100px;"
                      >提交</Button
                    >
                    <Button @click="modal" v-if="pay">支付</Button>
                    <Modal v-model="modal11" title="支付">
                      <img :src="url" />
                    </Modal>
                    <Button @click="cancel" class="ml-2">取消</Button>
                  </td>
                </tr>
              </tbody>
            </table>
          </form>
        </div>
      </div>
    </Form>
  </Layout>
</template>
<script>
export default {
  data() {
    return {
      number: 10,
      sub: false,
      pay: false,
      orderInfo: {},
      iport: '',
      url: '',
      modal11: false,
      proviences: [],
      citys: [],
      regins: [],
      currentUser: {},
      roomCount: '',
      floor: '',
      face: '',
      repair: '',
      lift: '',
      house: {
        area: '',
        roomCount: '',
        provienceId: '0',
        cityId: '0',
        reignId: '0',
        imgUrl: '',
        louceng: '',
        chaoxiang: '',
        zhuangxiu: '',
        dianti: 2,
        xiaoqu: '',
        pianqu: '',
        clientId: '',
        niandai: '',
        tel: '',
        leasePrice: '',
        wxNumber: '',
      },
      houseSell: {
        unitPrice: '',
        totalPrice: '',
        propertYear: '',
        clientId: 1001,
        ct: '',
        ut: '',
      },
      propertTypes: [
        {
          value: 1,
          label: '军产',
        },
        {
          value: 2,
          label: '国产',
        },
        {
          value: 3,
          label: '地产',
        },
        {
          value: 4,
          label: '公寓',
        },
        {
          value: 5,
          label: '公建',
        },
        {
          value: 6,
          label: '商铺',
        },
      ],
      roomCounts: [
        { value: 1, label: '一室' },
        { value: 2, label: '二室' },
        { value: 3, label: '三室' },
        { value: 4, label: '四室' },
        { value: 5, label: '五室以上' },
        { value: 6, label: '上跃' },
        { value: 7, label: '下跃' },
        { value: 8, label: '别墅' },
      ],
      floors: [
        { value: '高', label: '高' },
        { value: '中', label: '中' },
        { value: '低', label: '低' },
        { value: '多层', label: '多层' },
        { value: '小高层', label: '小高层' },
        { value: '高层', label: '高层' },
      ],
      faces: [
        { value: '南北', label: '南北' },
        { value: '东西', label: '东西' },
        { value: '其他', label: '其他' },
      ],
      repairs: [
        { value: '清水', label: '清水' },
        { value: '简装', label: '简装' },
        { value: '精装', label: '精装' },
        { value: '豪装', label: '豪装' },
      ],
      lifts: [
        { value: 1, label: '有' },
        { value: 2, label: '无' },
      ],
    }
  },

  methods: {
    //图片上传时文件格式错误方法
    handleFormatError(file) {
      this.$Notice.warning({
        title: '文件格式不正确',
        desc:
          '文件 ' +
          file.name +
          ' 格式不正确，请上传 jpg 或 png 或 jpeg格式的图片。',
      })
    },
    //校验图片的大小，不能大于2M
    handleMaxSize: function(file) {
      this.$Modal.info({
        title: '超出文件大小限制',
        content: '文件 ' + file.name + ' 太大，不能超过 2M。',
      })
    },
    handleRemove(file) {
      // 从 upload 实例删除数据
      this.$data.house.imgUrl = ''
    },
    //上传成功后的勾子
    handleSuccess: function(response, file, fileList) {
      this.$data.house.imgUrl = response.DATA.URL
      console.log(this.$data.house.imgUrl)
    },

    ss: function(item) {
      console.log(this.house)
    },
    searchRegin: function(srId) {
      this.house.cityId = srId
      this.house.reignId = '0'
      if (!srId) {
        this.regins = []
        this.house.cityId = '0'
        this.house.reignId = '0'
      } else {
        let self = this
        this.http
          .get({
            url: '/sys-region/list',
            param: {
              parentId: srId,
            },
          })
          .then((data) => {
            self.$data.regins = data
          })
      }
    },
    searchCity: function(srId) {
      this.regins = []
      this.house.provienceId = srId
      this.house.cityId = '0'
      this.house.reignId = '0'
      if (!srId) {
        this.citys = []
        this.house.provienceId = '0'
        this.house.cityId = '0'
        this.house.reignId = '0'
      } else {
        let self = this
        this.http
          .get({
            url: '/sys-region/list',
            param: {
              parentId: srId,
            },
          })
          .then((data) => {
            self.$data.citys = data
          })
      }
    },
    searchProvience: function() {
      let self = this
      this.http
        .get({
          url: '/sys-region/list',
          param: {
            parentId: 0,
          },
        })
        .then((data) => {
          self.$data.proviences = data
        })
    },
    submit: function() {
      if(this.$data.house.tel === ""){
        this.message.error("电话必须输入");
        return;
      }
      if (this.$data.house.area === null) {
        this.message.error('面积必须输入')
        return
      }
      if (this.$data.house.provienceId === null) {
        this.message.error('省份必须输入')
        return
      }
      if (this.$data.house.roomCount === null) {
        this.message.error('室必须输入')
        return
      }
      if (this.$data.house.cityId === null) {
        this.message.error('市必须输入')
        return
      }
      if (this.$data.house.reignId === null) {
        this.message.error('区必须输入')
        return
      }
      if (this.$data.houseSell.totalPrice === null) {
        this.message.error('总价必须输入必须输入')
        return
      }
      let self = this
      this.http
        .post({
          url: '/house-lease-client-vo/info',
          param: {
            provienceId: this.$data.house.provienceId,
            cityId: this.$data.house.cityId,
            reignId: this.$data.house.reignId,
            pianqu: this.$data.house.pianqu,
            xiaoqu: this.$data.house.xiaoqu,
            roomCount: this.$data.house.roomCount,
            chaoxiang: this.$data.house.chaoxiang,
            dianti: this.$data.house.dianti,
            zhuangxiu: this.$data.house.zhuangxiu,
            niandai: this.$data.house.niandai,
            area: this.$data.house.area,
            imgUrl: this.$data.house.imgUrl,
            leasePrice: this.$data.house.leasePrice,
            louceng: this.$data.house.louceng,
            tel: this.$data.house.tel,
            wxNumber: this.$data.house.wxNumber,
            clientId: this.$data.house.clientId,
          },
        })
        .then((data) => {
          self.message.info('新增成功')
          this.http.put({
            url: '/pay-order/info/caozuo',
            param: {
              orderNumber: this.orderInfo.orderNumber,
            },
          })
          this.cancel()
        })
    },
    cancel: function() {
      this.$router.push({
        name: 'user_center_fang_zu',
        params: {},
      })
    },
    getOrderStatu: function() {
      console.log(this.$data.number)
      this.number--
      if (this.number === 0) {
        clearInterval(this.longSearch)
        this.modal11 = false
        this.number = 10
        this.$Notice.error({
          title: '支付超时',
        })
      }
      //发请求查询支付状态
      this.http
        .get({
          url: '/pay-order/info',
          param: {
            orderNumber: this.orderInfo.orderNumber,
          },
        })
        .then((data) => {
          console.log('支付状态' + data)
          if (data == 2) {
            this.modal11 = false
            clearInterval(this.longSearch)
            this.pay = false
            this.sub = true
            this.$Notice.success({
              title: '支付成功',
            })
          }
        })
    },
    modal: function() {
      clearInterval(this.longSearch)
      this.number = 10
      this.modal11 = true
      this.url = this.iport + 'pay/nativeV2?clientId=' +
        this.$data.orderInfo.clientId +
        '&orderTypeId=' +
        this.$data.orderInfo.orderTypeId +
        '&money=' +
        this.$data.orderInfo.price +
        '&orderNumber=' +
        this.$data.orderInfo.orderNumber
      this.longSearch = setInterval(this.getOrderStatu, 3000)
    },
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  created: function() {
    this.$data.currentUser = JSON.parse(sessionStorage.getItem('CURRENT'))
    this.$data.house.clientId = this.$data.currentUser.client.clientId
    this.http
      .get({
        //查看已支付未操作的订单
        url: '/pay-order/list',
        param: {
          clientId: this.$data.house.clientId,
          orderTypeId: 2,
        },
      })
      .then((data) => {
        this.$data.orderInfo = data
        if (this.$data.orderInfo) {
          this.sub = true
        } else {
          this.http
            .post({
              //新增订单
              url: '/pay-order/info',
              param: {
                clientId: this.$data.house.clientId,
                orderTypeId: 2,
              },
            })
            .then((data) => {
              this.$data.orderInfo = data
              this.pay = true
            })
        }
      })

    this.iport = this.store.state.iport
    this.url = this.iport + 'image/upload'
    this.searchProvience()
    // var cli = this.local.session.getItem("CURRENT");
    // this.houseSell.clientId = cli.client.clientId;
  },
}
</script>

<style></style>
